<template>
	<div class="report-container">
		<h2>论文查重详细报告</h2>
		<div v-for="(item, index) in results" :key="index" class="report-item">
			<h3>命中文件 {{ index + 1 }}：{{ getFileName(item.targetFile) }}</h3>
			<div class="report-metrics">
				<div class="metric">
					<div class="metric-title">综合重复率</div>
					<div class="metric-value">{{ (item.similarity * 100).toFixed(2) }}%</div>
				</div>
				<div class="metric">
					<div class="metric-title">余弦相似度</div>
					<div class="metric-value">{{ (item.cosine * 100).toFixed(2) }}%</div>
				</div>
				<div class="metric">
					<div class="metric-title">Simhash相似度</div>
					<div class="metric-value">{{ (item.simhash * 100).toFixed(2) }}%</div>
				</div>
				<div class="metric">
					<div class="metric-title">Jaccard相似度</div>
					<div class="metric-value">{{ (item.jaccard * 100).toFixed(2) }}%</div>
				</div>
				<div class="metric">
					<div class="metric-title">编辑距离相似度</div>
					<div class="metric-value">{{ (item.editDistanceSimilarity * 100).toFixed(2) }}%</div>
				</div>
			</div>

			<div class="other-metrics">
				<p>累计重复字符数：{{ item.totalRepeatedChars }}</p>
				<p>基准文档复制比：{{ (item.baseCopyRatio * 100).toFixed(2) }}%</p>
				<p>目标文档复制比：{{ (item.targetCopyRatio * 100).toFixed(2) }}%</p>
				<p>单篇最大重复字符数：{{ item.maxSingleRepetition }}</p>
				<p>最大复制比：{{ (item.maxCopyRatio * 100).toFixed(2) }}%</p>
			</div>

			<!-- 原文与重复内容对照 -->
			<div v-if="item.dealFragments && item.dealFragments.length" class="fragments-section">
				<h4>原文与重复内容对照</h4>
				<div v-for="(frag, fIndex) in item.dealFragments" :key="fIndex" class="fragment-report">
					<!-- 匹配详情头部 -->
					<div class="fragment-header">
						<p>
							<strong>基准位置：</strong>{{ frag.baseStart }} - {{ frag.baseEnd }}
							(长度: {{ frag.charLength }})
						</p>
						<p>
							<strong>目标位置：</strong>{{ frag.targetStart }} - {{ frag.targetEnd }}
						</p>
						<p>
							<strong>指纹：</strong>{{ frag.fingerprint }}
						</p>
					</div>
					
					<!-- 原文上下文展示：左侧为基准文档，上侧为目标文档 -->
					<div class="fragment-comparison">
						<div class="comparison-column">
							<div class="column-header">基准文档上下文（上传文件）</div>
							<div class="column-content" v-html="cleanText(frag.baseContext)"></div>
						</div>
						<div class="comparison-column">
							<div class="column-header">目标文档上下文（命中文件)</div>
							<div class="column-content" v-html="cleanText(frag.targetContext)"></div>
						</div>
					</div>
					<!-- 重复内容展示 -->
					<div class="duplicate-content-section">
						<div class="column-header">具体重复内容</div>
						<div class="column-content" v-html="formatDuplicate(frag.text)"></div>
					</div>
				</div>
			</div>
		</div>

		<!-- 指标说明 -->
		<div class="explanation-section">
			<h3>指标说明</h3>
			<ul>
				<li><strong>targetFile</strong>：目标文件路径</li>
				<li><strong>similarity</strong>：综合相似度</li>
				<li><strong>cosine</strong>：余弦相似度</li>
				<li><strong>simhash</strong>：Simhash 相似度</li>
				<li><strong>jaccard</strong>：Jaccard 相似度</li>
				<li><strong>editDistanceSimilarity</strong>：编辑距离相似度</li>
				<li>
					<strong>totalRepeatedChars</strong>：累计重复字符数，所有匹配片段字符总数
				</li>
				<li>
					<strong>baseCopyRatio</strong>：基准文档复制比（重复字数占基准文档总字数比例）
				</li>
				<li>
					<strong>targetCopyRatio</strong>：目标文档复制比（重复字数占目标文档总字数比例）
				</li>
				<li><strong>maxSingleRepetition</strong>：单篇最大重复字符数</li>
				<li>
					<strong>maxCopyRatio</strong>：最大复制比（基准文档与目标文档复制比的较大值）
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "ReportDisplay",
		props: {
			results: {
				type: Array,
				required: true
			}
		},
		methods: {
			// 获取文件名
			getFileName(filePath) {
				try {
					const parts = filePath.split('/');
					return parts[parts.length - 1];
				} catch (e) {
					return filePath;
				}
			},
			
			// 清理文本：\n → <br/>；\r、↵ → 空格
			cleanText(text) {
			  if (!text) return '';
			  // 1) 将 \n 替换为 <br/>
			  let replaced = text.replace(/\n/g, '<br/>');
			  // 2) 将 \r 和 ↵ 替换为空格
			  replaced = replaced.replace(/[\r↵]+/g, ' ');
			  // 3) 去除首尾空格
			  return replaced.trim();
			},
			
			// 对重复文本做清理并标红
			formatDuplicate(text) {
			  if (!text) return '';
			  // 1) 将 \n 替换为 <br/>
			  let replaced = text.replace(/\n/g, '<br/>');
			  // 2) 将 \r 和 ↵ 替换为空格
			  replaced = replaced.replace(/[\r↵]+/g, ' ');
			  // 3) 去除首尾空格
			  replaced = replaced.trim();
			  // 4) 用红色标记
			  return `<span style="color:red;">${replaced}</span>`;
			}
		}
	};
</script>

<style scoped>
	.report-container {
		padding: 20px;
		background: #fff7e8;
		border: 1px solid #f2dab8;
		border-radius: 4px;
		margin-top: 20px;
		font-family: "Microsoft YaHei", sans-serif;
	}

	.report-item {
		margin-bottom: 30px;
		padding-bottom: 20px;
	}

	h2 {
		font-weight: bold;
		margin-bottom: 15px;
	}

	h3,
	h4 {
		font-weight: bold;
	}

	.report-metrics {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.metric {
		flex: 15%;
		margin: 10px 10px 10px 0;
		border: 1px solid #ccc;
		padding: 8px;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.metric-title {
		font-weight: bold;
		margin-bottom: 5px;
		font-size: 13px;
		color: #333;
	}

	.metric-value {
		font-size: 14px;
		color: #555;
	}

	.other-metrics p {
		margin: 4px 0;
		font-size: 13px;
		color: #444;
	}

	.duplicates-section {
		margin-top: 15px;
		padding: 10px;
		background-color: #ffecec;
		border: 1px solid #ffcccc;
		border-radius: 4px;
	}

	.duplicates-section h4 {
		margin: 0 0 5px;
		font-size: 14px;
	}

	.fragments-section {
		margin-top: 15px;
		margin-bottom: 10px;
	}

	.fragment-report {
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 2px dashed #ccc;
	}

	.fragment-header p {
		margin: 4px 0;
		font-size: 13px;
		color: #333;
	}

	.fragment-comparison {
		display: flex;
		margin-top: 10px;
	}

	.comparison-column {
		flex: 1;
		padding: 10px;
		border: 1px solid #ddd;
		margin-right: 10px;
		border-radius: 4px;
		background: #fff;
	}

	.comparison-column:last-child {
		margin-right: 0;
	}

	.column-header {
		font-weight: bold;
		background: #108040;
		padding: 5px;
		text-align: center;
		margin-bottom: 5px;
		color: #fff;
		font-size: 14px;
	}

	.column-content {
		max-height: 150px;
		overflow-y: auto;
		padding: 5px;
		background: #fff;
		font-size: 13px;
		line-height: 1.5;
		word-break: break-all;
	}

	.duplicate-content-section {
		margin-top: 10px;
		padding: 10px;
		border: 1px solid #ffcccc;
		border-radius: 4px;
		background: #ffecec;
	}

	.explanation-section {
		margin-top: 20px;
		padding: 10px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	/* 指标说明 */
	.explanation-section ul {
		list-style: disc;
		margin-left: 12px;
		line-height: 1.5;
		font-size: 13px;
	}
</style>